<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TemplatedDataBoundUserControlExample.aspx.cs" Inherits="Demo.TemplatedDataBoundUserControlExample" %>

<%@ Register src="UserControls/MultiProfileUserControl.ascx" tagname="MultiProfileUserControl" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Templated DataBound UserControl Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <link href="css/style.css" type="text/css" rel="stylesheet" />
    <script src="script/prototype.js?load=effects,slider" type="text/javascript"></script>
    <script src="script/scriptaculous.js?load=effects,slider" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="float:left">
        <h2 style="font-family:Courier New;">Templated DataBound UserControl Example</h2>
        <ul style="font-family:Courier New;font-size:20px">
         <li><a style="text-decoration:none" href="Index.aspx">Index</a></li>
         <li><a style="text-decoration:none" href="DataBoundUserControlExample.aspx">DataBound UserControls</a></li>
         <li>Templated DataBound UserControls</li>
         <li><a style="text-decoration:none" href="JsApiIntroduction.aspx">Introducing the JsApi</a></li>
         <li><a style="text-decoration:none" href="AdvancedJsApi.aspx">Advanced JsApi</a></li>
        </ul>
        <uc1:MultiProfileUserControl ID="MultiProfileUserControl1" runat="server" />
    </div>
    <div style="float:right;background-color:white;background-image:none;border:1px solid menu;padding:5px;font-family:Courier New;font-size:18px;padding:15px">
        Well here we are. That's better. By leveraging the <strong>TemplatedDataBoundUserControl</strong> we were able to create, using only UserControls, what would have otherwise required a Repeater (or some other Server Control).
        <blockquote><strong>"</strong>Well that's great, but what's the big deal?<strong>"</strong></blockquote> If it hasn't dawned on you yet, you now have at your disposal all the power of encapsulation of a Server Control but all the flexibility of presenation of a UserControl. 
        With the added ability to do Templating and DataBinding you are not loosing anything by resorting to UserControls rather than Server Controls. Your code behind can now strictly deal with data and your ascx can take care of the presentation. Nothing stops you from 
        inheriting any number of ascx files from the same underlying class. You could even choose to compile your UserControl classes in a separate assembly making them portable across Web Applications just like a Server Control.
        <br /><br />
        Now the downside. You may have noticed in Design Mode that the the  designer shows errors on the control though infact there are none. The reason is 
        that the default designer doesn't recognize UserControls with an ItemTemplate as being valid (even though you get intellisense in Source Mode). Short of writing a custom designer I could find no way around this.  
        <br /><br />
        By now some of you are maybe asking, well how about hierarchical DataBound controls? Things like master-detail? Well we have you covered. Though these are a little more complex to write I have provided a base class
        called <strong>HeirarchialDataBoundUserControl</strong> that simplifies the task. I am not going to build a sample in this demo but for these implementations there is a function that is executed as each child in the 
        heirarchy is created. As a developer it is your job to bind the portion of the parent DataSource that is pertinent to the the child within this method. You can nest controls within controls and use controls as parts 
        of an ItemTemplate. The name of the game is composition. Next we introduce the <strong>JsApi</strong>.
        <br /><br />
    </div>
    
    </form>
</body>
</html>
